import {Component} from 'react';
// 页面公共组件
import Header from '../../components/Header'
import Footer from '../../components/Footer'

// 业务组件
import AddTask  from './components/AddTask';
import TasksList from './components/TasksList';

class Tasks extends Component {
  state={tasks: []}
  
  addTask =(task)=>{ //00ff11
      if(!task) return 
      const {tasks} = this.state
      tasks.unshift(task)

      this.setState({
          tasks
      })
  }

  deleteTask = (index)=>{ //00ff22
      const { tasks } = this.state

      //数组删除  [{1},{2},{3},{4}]
      tasks.splice(index, 1)

      this.setState({
          tasks
      })
  }


  render() {
      return (
          <div>
              <Header />
              <h1> Today Tasks : {this.state.tasks.length}</h1>
              <AddTask addTask={this.addTask}/>
              <TasksList tasks={this.state.tasks} deleteTask={this.deleteTask}/>
              <Footer />
          </div>
      )
  }
}

export default Tasks;
